/* 
1、封闭作用域，防止污染全局变量
2、发送ajax请求，获取数据
3、请求成功之后创建dom结构并插入，插入的时候要在整体的li高度最小的地方进行插入，这就要求获取最小高度的li的index值
4、监听滚动条，再对滚动条的高度+视口的高度与高度最小的li的高度进行比较，只要滚动条的高度+视口的高度一大于高度最小的高度就发送请求
*/
/*封闭作用域*/
(function () {
    var oLi = $("li");
    var nowIndex = 0;
    var num = 1;
    var flag = false;
    getData();
    /*发送请求*/
    function getData() {
        console.log(num)
        if(!flag) {
            flag = true;
            $.ajax({
                type: "GET",
                // url: "./data.txt",
                url: "http://localhost/waterfall/getPics.php?cpage=" + num,
                success: addDom,
                beforeSend: function (data) {
                    if (data.readyState == 0) {
                        $(".wrapper .loading").fadeIn(100);
                    }
                },
                complete: function (data) {
                    if (data.status == 200) {
                        $(".wrapper .loading").fadeOut(150);
                    }
                }
                
            });
            num++;
        }

       
    }
    /*创建结构*/
    function addDom(data) {
        var dataList = JSON.parse(data);
        if(dataList.length > 1) {
            console.log(dataList)
            dataList.forEach(function (element, index) {
                var oItem = $("<div class='item'></div>"),
                    oImgBox = $("<div class='imgBox'></div>"),
                    oP = $("<p></p>"),
                    img = null;
                img = new Image();
                img.src = element.preview;
                oP.text(element.title);
                img.onload = function () {  //需要在img加载完成之后再进行插入dom
                    oImgBox.append(img);
                    oItem.append(oImgBox).append(oP);
                    // oLi --->  append()
                    nowIndex = getMinOliIndex(oLi);
                    oLi.eq(nowIndex).append(oItem);
                }
    
            })
            flag = false;
        }
        
    }

    /*获取高度最小的li的index值*/
    function getMinOliIndex (dom) {
        //假如以第一个li的高度为最小的，以后的每个li和第一个li的高度进行比较，如果比第一个li还要小，就覆盖第一个li的高度和index值
        var minHeight = parseInt($(dom[0]).css("height"));
        var index = 0;
        for(var i = 1; i < dom.length; i++){
            var otherOliHeight = parseInt($(dom[i]).css("height"));
            if(otherOliHeight< minHeight) {
                minHeight = otherOliHeight;
                index = i;
            }
        }
        return index;
    }

    /*监听滚动条，再次发送请求*/
    $(window).scroll(function () {
        var scrollHeight = $(this).scrollTop();
        var viewHeight = $(window).height();
        var pageHeight = parseInt(oLi.eq(getMinOliIndex(oLi)).css("height"));
        if(scrollHeight + viewHeight > pageHeight) {  //滚动条的高度+视口的高度与高度最小的li的高度进行比较，只要滚动条的高度+视口的高度一大于高度最小的高度就发送请求
            getData();
        }
    })


})();